{extend name="public/base"/}
{block name="content"}
    <div class="data-list" data-url="{:url('index')}">
        <form class="layui-form inline-form">
            <div class="pull-left">
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal layui-btn-sm ajax-form" title="审批模块" data-url="{:url('add')}"><i class="layui-icon layui-icon-add-circle"></i> 新增</button>
                </div>
            </div>
        </form>
        <div class="data">
            <p><i class="fa fa-spinner fa-spin"></i> 加载中...</p>
        </div>
    </div>
    <span id="admin-data" class="layui-hide">{$admin|json_encode}</span>
{/block}
{block name="script"}
<script type="text/html" id="flow-template" class="layui-hide">
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis layui-icon-vercode"></i>
        <div class="layui-timeline-content layui-text layui-row">
            <div class="layui-col-xs8">
                <div class="layui-col-xs6">
                    <input type="text" placeholder="审批组" autocomplete="off" class="layui-input flow-title" name="name[]" value="">
                </div>
                <div class="layui-col-xs6">
                    <div class="more-xm-select" tips="审批人"></div>
                </div>
            </div>
            <div class="layui-col-xs4">
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn layui-bg-blue flow-up"><i class="layui-icon layui-icon-up"></i></a>
                    <a class="layui-btn layui-btn flow-down"><i class="layui-icon layui-icon-down"></i></a>
                    <a class="layui-btn layui-btn layui-bg-red flow-delete"><i class="layui-icon layui-icon-subtraction"></i></a>
                </div>
            </div>
        </div>
    </li>
</script>
<script type="text/javascript">
    layui.extend({
        xmSelect: 'xm-select'
    }).use(['layer', 'jquery', 'xmSelect'], function()
    {
        var layer = layui.layer
            , $ = layui.jquery
            , adminData = JSON.parse($("#admin-data").text());
        window.renderSelect = renderSelect;
        function renderSelect(node, json, defVal)
        {
            json = json || adminData;
            defVal = defVal || [];
            if($.type(defVal) == 'string') defVal = defVal.split(',');
            for(let i in json)
            {
                json[i]["selected"] = false;
                for(let j in defVal)
                {
                    if(defVal[j] == json[i].id)
                    {
                        json[i]["selected"] = true;
                        break;
                    }
                }
            }
            var xargs = {
                el: node,
                prop: {
                    name: "nickname",
                    value: "id"
                },
                tips: $(node).attr("tips"),
                name: "user_id[]",
                autoRow: true,
                filterable: true,
                data: json,
            };
            layui.xmSelect.render(xargs);
        }

        $("body").on("click", "#add-flow", function()
        {
            $("ul.job-flow").append($("#flow-template").html());
            renderSelect($(".more-xm-select:last").get(0), adminData, []);
        });

        $("body").on("click", ".flow-delete", function()
        {
            $(this).parents('li').remove();
        });

        $("body").on("click", ".flow-up", function()
        {
            var $curr = $(this).parents('li')
                , $prev = $curr.prev();
            $curr.after($prev);
        });
        $("body").on("click", ".flow-down", function()
        {
            var $curr = $(this).parents('li')
                , $next = $curr.next();
            $next.after($curr);
        });
    });
</script>
{/block}